<template>
  <AcceptHandleHeadComponent
    ref="acceptHandleHeadRef"
    :ucolumns="ucolumns"
    :type="LableTitle.arriveInfo"
    @myEvent="myEvent"
    @setColumns="setColumns"
    @onSearch="onSearch"
  >
    <div slot="head" class="arrive_add_father" @click="addHandleData">
      <a-icon class="arrive_add_icon" type="plus-circle" theme="filled" />
      <span class="arrive_add_span">新增送达</span>
    </div>
    <template slot="content">
      <div class="accept_content_table">
        <!-- 表格数据 -->
        <a-table
          :scroll="scroll"
          :columns="ucolumns"
          :data-source="listData"
          :pagination="upagination"
          :loading="loading"
          rowKey="id"
          @change="tableChange"
          size="middle"
          :bordered="ubordered"
          :rowClassName="rowClassName"
          :components="header"
          ref="table"
          :key="tableCountKey"
        >
          <span slot="serial" slot-scope="text, record, index">
            {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
          </span>

          <div slot="sourceSlot" slot-scope="source" class="beyond_hiding" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ sourceLable(source) }}</span>
              </template>
              {{ sourceLable(source) }}
            </a-tooltip>
          </div>

          <div slot="noticetypeSlot" slot-scope="noticetype" class="beyond_hiding" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ noticeTypeLabel(noticetype) }}</span>
              </template>
              {{ noticeTypeLabel(noticetype) }}
            </a-tooltip>
          </div>

          <div slot="acceptcodeSlot" slot-scope="acceptcode" class="beyond_hiding" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ acceptcode }}</span>
              </template>
              {{ acceptcode }}
            </a-tooltip>
          </div>

          <div slot="targetnameSlot" slot-scope="targetname" class="beyond_hiding" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ targetname }}</span>
              </template>
              {{ targetname }}
            </a-tooltip>
          </div>

          <div slot="applynameSlot" slot-scope="applyname" class="beyond_hiding" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ applyname }}</span>
              </template>
              {{ applyname }}
            </a-tooltip>
          </div>

          <div slot="reasonSlot" slot-scope="reason" class="beyond_hiding" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ reason }}</span>
              </template>
              {{ reason }}
            </a-tooltip>
          </div>

          <div slot="sendwaySlot" slot-scope="sendway" class="beyond_hiding" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ sendWayLabel(sendway) }}</span>
              </template>
              {{ sendWayLabel(sendway) }}
            </a-tooltip>
          </div>

          <div slot="arrivetimeSlot" slot-scope="arrivetime" class="beyond_hiding" style="width: 100%">
            {{ arrivetime | getTimeFormat('YYYY年M月D日') }}
          </div>

          <span slot="operation" slot-scope="text, record">
            <template>
              <a href="javascript:;" @click="arriveDetail(record)">详情</a>
            </template>
          </span>
        </a-table>
      </div>
    </template>
  </AcceptHandleHeadComponent>
</template>

<script>
import drag from '@/components/TableDrag/drag'
import storage from 'store'
import { APP_USER } from '@/store/mutation-types.js'
// import { queryArriveRecord, getDefualtTree } from '@/api/arrive/apl_arrive_record'
import { Tp_sendwayList } from '@/enumeration/Tp_sendway'
import { St_arriveList } from '@/enumeration/St_arrive'
import { Tp_admpr } from '@/enumeration/Tp_admpr'
import { Tp_procmaterialList } from '@/enumeration/Tp_procmaterial'
import { Tp_applysourceList } from '@/enumeration/Tp_applysource'
import { LableTitle } from '@/enumeration/LableTitle'
import AcceptHandleHeadComponent from '@/views/accept/component/AcceptHandleHeadComponent.vue'

const ucolumns = [
  {
    title: '序号',
    width: 80,
    key: 'index',
    align: 'center',
    fixed: 'left',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '案号',
    dataIndex: 'acceptcode',
    key: 'acceptcode',
    width: 250,
    align: 'left',
    scopedSlots: { customRender: 'acceptcodeSlot' }
  },
  {
    title: '申请人',
    dataIndex: 'applyname',
    key: 'applyname',
    width: 250,
    align: 'left',
    scopedSlots: { customRender: 'applynameSlot' }
  },
  {
    title: '被申请人',
    dataIndex: 'targetname',
    key: 'targetname',
    width: 250,
    align: 'left',
    scopedSlots: { customRender: 'targetnameSlot' }
  },
  {
    title: '申请来源',
    dataIndex: 'source_text',
    key: 'source_text',
    width: 150,
    align: 'left',
    scopedSlots: { customRender: 'sourceSlot' }
  },
  {
    title: '案由',
    dataIndex: 'reason',
    key: 'reason',
    width: 250,
    align: 'left',
    scopedSlots: { customRender: 'reasonSlot' }
  },
  {
    title: '文书类型',
    dataIndex: 'noticetype_text',
    key: 'noticetype_text',
    width: 250,
    align: 'left',
    scopedSlots: { customRender: 'noticetypeSlot' }
  },
  {
    title: '送达方式',
    dataIndex: 'sendway_text',
    key: 'sendway_text',
    width: 150,
    align: 'left',
    scopedSlots: { customRender: 'sendwaySlot' }
  },
  {
    title: '送达时间',
    width: 150,
    key: 'arrivetime',
    dataIndex: 'arrivetime',
    align: 'left',
    scopedSlots: { customRender: 'arrivetimeSlot' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 150,
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  data () {
    return {
      ucolumns: ucolumns,
      // columns: columns,
      cardColumns: [],
      queryParam: {
        acceptcode: undefined, // 案号
        applyname: undefined, // 申请人
        targetname: undefined, // 被申请人
        f_sendway: undefined, // 送达方式
        f_noticetype: undefined, // 材料类型
        arriveStartTime: '', // 送达开始时间
        arriveEndTime: '', // 送达结束时间
        pageNumber: 1,
        pageSize: 20,
        sort: 'arrivetime',
        order: 'desc'
      },
      listData: [],
      upagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        showTotal: total => `共计 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100']
      },
      loading: false,
      ubordered: true, // 表格边框是否显示
      mixins: [drag],
      currentUser: storage.get(APP_USER), // 登录人信息
      Tp_sendwayList: Tp_sendwayList, // 送达方式
      St_arriveList: St_arriveList, // 送达状态
      Tp_procmaterialList: Tp_procmaterialList, // 材料类型-过程材料
      noticeTypeList: Tp_procmaterialList,
      Tp_applysourceList: Tp_applysourceList,
      Tp_admpr: Tp_admpr,
      defaultTreeData: [], // 默认树结构
      LableTitle: LableTitle,
      header: undefined,
      tableCountKey: 0,
      scroll: { x: 1000, y: 410 }
    }
  },
  components: {
    AcceptHandleHeadComponent
  },
  computed: {},
  created () {
    this.headerChange()
    // 待处理人员
    this.queryList()
    this.getDefualtTree()
  },
  mounted () {},
  watch: {
    ucolumns: {
      handler (newValue, oldVal) {
        this.headerChange()
      },
      deep: true // 深度监听
    }
  },
  methods: {
    myEvent (e) {
      if (e) {
        this.scroll.y = this.scroll.y + e
      } else {
        this.scroll.y = 410
      }
    },
    /**
     * 显示处理界面
     */
    arriveDetail (record) {
      this.$router.push({
        path: '/ArriveInfoDetail',
        query: {
          id: record.id
        }
      })
    },

    headerChange () {
      console.log('移动后', this.ucolumns)
      this.header = {
        header: {
          cell: drag.methods.initDrag(this.ucolumns)
        }
      }
    },
    setColumns (columns) {
      console.log('重置前', this.ucolumns)
      // tableCountKey自增是为了让表格控件每次销毁强制更新
      this.tableCountKey += 1
      this.ucolumns = columns
      // this.ucolumns = columns
      console.log('重置后', this.ucolumns)
      this.setCardColumns()
    },
    filterOption (input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    onSearch (val) {
      this.queryParam.acceptcode = val
      this.queryParam.pageNumber = 1
      this.queryParam.pageSize = 20
      this.queryList()
    },
    // 接收时间监听判断开始结束日期是否合理
    subtimeListen () {
      if (
        this.queryParam.applyStartDate > this.queryParam.applyEndDate &&
        this.queryParam.applyStartDate &&
        this.queryParam.applyEndDate
      ) {
        this.queryParam.applyStartDate = undefined
      }
    },
    /**
     * 重置查询条件并查询数据
     */
    reQuery () {
      this.queryParam = {
        acceptcode: undefined, // 案号
        applyname: undefined, // 申请人
        targetname: undefined, // 被申请人
        f_sendway: undefined, // 送达方式
        f_noticetype: undefined, // 材料类型
        arriveStartTime: '', // 送达开始时间
        arriveEndTime: '', // 送达结束时间
        pageNumber: 1,
        pageSize: 20,
        sort: 'arrivetime',
        order: 'desc'
      }
      this.queryList()
    },

    tableChange (upagination, filters, sorter, { currentDataSource }) {
      this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
      this.queryParam.pageNumber = upagination.current
      this.queryParam.pageSize = upagination.pageSize
      this.queryList()
    },
    // 其他tab页触发修改当前页事件
    tableChangeOther (upagination) {
      this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
      this.queryParam.pageNumber = upagination.current
      this.queryParam.pageSize = upagination.pageSize
      this.queryList()
    },

    // 接收时间监听判断开始结束日期是否合理
    pubDateListen () {
      if (
        this.queryParam.f_pubStartDate > this.queryParam.f_pubEndDate &&
        this.queryParam.f_pubStartDate &&
        this.queryParam.f_pubEndDate
      ) {
        this.queryParam.f_pubStartDate = undefined
      }
    },

    getCpQueryParam () {
      // 时间转换
      const cpQueryParam = JSON.parse(JSON.stringify(this.queryParam))
      if (this.queryParam.applyStartDate?.format) {
        cpQueryParam.applyStartDate = this.queryParam.applyStartDate.format('YYYY-MM-DD') + ' 00:00:00'
      }
      if (this.queryParam.applyEndDate?.format) {
        cpQueryParam.applyEndDate = this.queryParam.applyEndDate.format('YYYY-MM-DD') + ' 23:59:59'
      }
      return cpQueryParam
    },

    queryList () {
      // 时间转换
      const cpQueryParam = JSON.parse(JSON.stringify(this.queryParam))
      if (this.queryParam.arriveStartTime?.format) {
        cpQueryParam.arriveStartTime = this.queryParam.arriveStartTime.format('YYYY-MM-DD') + ' 00:00:00'
      }
      if (this.queryParam.arriveEndTime?.format) {
        cpQueryParam.arriveEndTime = this.queryParam.arriveEndTime.format('YYYY-MM-DD') + ' 23:59:59'
      }
      this.loading = true
      // queryArriveRecord(cpQueryParam)
      //   .then((res) => {
      //     if (res.code !== 0) {
      //       this.$message.error('获取数据失败')
      //     } else {
      //       this.listData = res.data.records
      //       this.setEnumData()
      //       this.upagination.total = res.data.total
      //       this.upagination.current = res.data.current
      //       this.upagination.pageSize = res.data.size
      //     }
      //   })
      //   .catch((err) => {
      //     this.listData = []
      //     console.log(err, '获取数据失败')
      //   })
      //   .finally(() => {
      //     this.loading = false
      //   })
    },
    // 设置对应的枚举值
    setEnumData () {
      if (this.listData) {
        this.listData.forEach(item => {
          // 是否行政不作为
          if (item.isomission == 3200) {
            // 行政不作为
            item.prtype_text = '行政不作为'
          } else {
            const prtype = item.prtype
            item.prtype_text = this.Tp_admpr[prtype] ? this.Tp_admpr[prtype].name : ''
          }

          // 来源
          item.source_text = this.sourceLable(item.source)
          // 状态
          item.noticetype_text = this.noticeTypeLabel(item.noticetype)
          // 送达方式
          item.sendway_text = this.sendWayLabel(item.sendway)
        })
      }
    },
    /**
     * 来源途径显示转换
     */
    sourceLable (val) {
      for (const key in this.Tp_applysourceList) {
        if (this.Tp_applysourceList[key].value == val) {
          return this.Tp_applysourceList[key].name
        }
      }
      return val
    },
    /**
     * 材料类型显示转换
     */
    noticeTypeLabel (val) {
      for (const key in this.noticeTypeList) {
        if (this.noticeTypeList[key].value == val) {
          return this.noticeTypeList[key].name
        }
      }
      return val
    },
    /**
     * 发送方式显示转换
     * @param {*} val
     */
    sendWayLabel (val) {
      for (const key in this.Tp_sendwayList) {
        if (this.Tp_sendwayList[key].value == val) {
          return this.Tp_sendwayList[key].name
        }
      }
      return val
    },
    /**
     * 获取默认树的查询条件
     */
    getDefualtTree () {
      // getDefualtTree().then((res) => {
      //   if (res.code !== 0) {
      //     console.log('获取基础树结构失败')
      //   } else {
      //     this.defaultTreeData = res.data
      //     // 将层级1和层级2的按钮禁用
      //     if (this.defaultTreeData && this.defaultTreeData.length > 0) {
      //       this.defaultTreeData.forEach((item) => {
      //         if (item.level == 0) {
      //           item.disabled = true
      //         }
      //         if (item.children && item.children.length > 0) {
      //           item.children.forEach((child) => {
      //             if (child.level == 1) {
      //               child.disabled = true
      //             }
      //           })
      //         }
      //       })
      //     }
      //   }
      // })
    },

    rowClassName (record, index) {
      return index % 2 === 0 ? 'oddRow' : 'evenRow'
    },

    setCardColumns () {
      const columns = this.ucolumns.filter(child => child.key != 'index' && child.key != 'action')
      this.cardColumns = JSON.parse(JSON.stringify(columns))
    },
    addHandleData () {
      this.$router.push({
        path: '/ArriveInfoAdd/new'
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/components/TableDrag/style.less';
</style>
<style lang="scss" scoped>
.accept_content {
  &_table {
    &_font_red {
      color: #ca0000;
      font-size: 16px;
      font-family: 'PingFang-SC-Heavy';
      font-weight: 400;
    }

    ::v-deep .ant-table-row-cell-break-word {
      font-size: 16px;
      font-family: 'PingFang-SC-Heavy';
      font-weight: 400;
      color: #2c2c2c;
    }

    ::v-deep .ant-table-thead > tr > th {
      height: 50px;
    }

    ::v-deep .ant-table-row-cell-break-word {
      font-size: 16px;
      font-family: 'PingFang-SC-Heavy';
      font-weight: 600;
      color: #2c2c2c;
    }

    // ::v-deep .ant-pagination-total-text {
    //   font-size: 16px;
    //   font-family: 'PingFang-SC-Heavy';
    //   font-weight: 400;
    //   color: #8e97b9;
    // }

    ::v-deep .ant-table-body,
    .ant-table-header {
      word-break: break-all;
      &::-webkit-scrollbar {
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        // height: 10px;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 6px;
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #a2c6e1;
      }
      &::-webkit-scrollbar-track {
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        background: transparent;
      }
    }
  }
}

.arrive_add_father {
  margin: 0px 20px 0px 0px;
}
.arrive_add_span {
  font-size: 20px;
  font-family: 'PingFang-SC-Heavy';
  font-weight: 800;
  text-decoration: underline;
  color: #0072c6;
  margin-left: 10px;
}

.arrive_add_icon {
  font-size: 20px;
  color: #0072c6;
}
</style>
